<template>
    <div class="header_information page-container">
        <!-- 头部 -->
        <el-row class="header_name">
            <el-col :span="24" class="header_text">
                <h1>老师信息</h1>
            </el-col>
            <el-col :span="24">
                <div class="header_line"></div>
            </el-col>
        </el-row>
        <!-- 表格内容 -->
        <el-row>
            <!-- 组委会信息 -->
            <el-col :span="24">
                <h3 class="contnet_text">老师信息</h3>
                <el-form :model="form" ref="i_data_ref" :rules="i_data_rules" label-width="100px">
                    <el-form-item label="老师名称" prop="teacherName">
                        <el-input placeholder="老师名称" v-model="form.teacherName" class="content_input"
                            v-model.trim="inputValueTrim" disabled />
                    </el-form-item>
                    <el-form-item label="所属考场" prop="name">
                        <el-input placeholder="所属考场" v-model="form.siteName" class="content_input"
                            v-model.trim="inputValueTrim" disabled />
                    </el-form-item>
                    <!-- <el-form-item label="已批阅" prop="name">
                        <el-input placeholder="已批阅" v-model="form.siteName" class="content_input"
                            v-model.trim="inputValueTrim" disabled />
                    </el-form-item>
                    <el-form-item label="未批阅" prop="name">
                        <el-input placeholder="未批阅" v-model="form.siteName" class="content_input"
                            v-model.trim="inputValueTrim" disabled />
                    </el-form-item> -->
                </el-form>
            </el-col>
        </el-row>

    </div>
</template>
<script  setup>
import { onMounted, ref } from "vue";
import { ElMessage } from 'element-plus'
import { useUserStore } from "@/store/user"
// 接口
import {
    getInformation,
    saveInformation,
} from "@/api/manage/organcommitmenu/index.js";
import ProvinceSelect from "@/components/province-select/index.vue"
const userStore = useUserStore();
// 基本信息
const form = ref({});
const handleGetInformation = async () => {
    form.value = userStore.info_data;
};

// 保存基本信息
const handleSaveInformation = async () => {
    i_data_ref.value.validate(async (v) => {

        if (!v) {
            return;
        }

        let res = await saveInformation(form.value);
        if (res.success) {

            ElMessage({
                message: '保存信息成功',
                type: 'success',
            })
            handleGetInformation();
        }
    });
}

//  验证
const i_data_ref = ref();
const inputValueTrim = ref('')
// 手机号
const checkPhone = (rule, value, callback) => {
    const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/
    if (!value) {
        callback(new Error('手机号码不能为空'))
    }
    if (phoneReg.test(value)) {
        callback()
    } else {
        callback(new Error('手机号码格式错误'))
    }
}

const checkName = (rule, value, callback) => {
    const chineseCharactersRegex = /^[\u4e00-\u9fa5]+$/;

    if (!chineseCharactersRegex.test(value)) {
        callback(new Error("请输入中文"));
    } else {
        // Validation passed
        callback();
    }
};


const i_data_rules = ref({
    name: [
        {
            type: 'string',
            required: true,
            message: '请输入单位名称',
            trigger: 'blur',
        },
        {
            min: 2, max: 10, message: '单位名称请输入 2-10 个字符',
            trigger: 'blur'
        },
    ],
    county: [
        {
            required: true,
            message: '请选择所在地区',
            trigger: 'blur',
        }
    ],
    address: [
        {
            type: 'string',
            required: true,
            message: '请输入地址',
            trigger: 'blur',
        },
        {
            min: 2, max: 120, message: '地址请输入 2-120 个字符',
            trigger: 'blur'
        },
    ],
    headName: [
        {
            required: true,
            validator: checkName,
            trigger: 'blur'

        },
        {
            min: 2, max: 8, message: '联系人姓名请输入 2-8 个字符',
            trigger: 'blur'
        },
    ],
    headPhone: [
        {
            required: true,
            validator: checkPhone,
            trigger: 'blur'
        },
    ],
    headEmail: [
        {
            type: 'string',
            required: true,
            message: '请输入联系邮箱',
            trigger: 'blur',
        },
        {
            validator: (rule, value, callback) => {
                // 使用正则表达式验证邮箱格式
                const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                if (emailPattern.test(value)) {
                    // 邮箱格式合法，通过校验
                    callback();
                } else {
                    // 邮箱格式不合法，校验失败，显示提示信息
                    callback(new Error('联系邮箱格式不正确'));
                }
            },
            trigger: 'blur',
        },
    ],
});

onMounted(() => {
    handleGetInformation();
});
</script>
  
<style lang="scss" scoped>
:deep(.el-space__item) {
    &:nth-child(3) {
        margin: 0 !important;
    }
}

.header_information {
    padding: 20px;

    .header_name {
        margin-left: 10px;
        margin-right: 10px;

        .header_text {
            margin-left: -10px;
            margin-right: -10px;
        }

        h1 {
            font-size: 28px;
        }
    }

    .header_line {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px 0;
        background-color: #8473f717;
    }

    .contnet_text {
        margin-bottom: 14px;
    }

    .content_input {
        width: 500px;
    }

    :deep(.el-input__wrapper) {
        padding: 0 15px;
    }

    :deep(.el-input.is-disabled) .el-input__inner {
        background-color: #f5f5f5;
    }

    .select_region {
        width: 500px;
        display: flex;
        justify-content: space-between;

        .el_form_content_text {
            width: 500px;
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .content_text_relation {
                font-size: 14px;
            }

            .content_text_contacts {
                color: #000;
                font-weight: bold;
            }

            span {
                color: #202020;
                font-size: 14px;
            }
        }
    }

    :deep(.el-input) {
        height: 40px;
    }

    .content_select {
        width: 160px;
    }

    // 保存信息按钮
    .save_btn {
        margin-left: 100px;
    }
}
</style>